import { ReactNode } from "react";
import { Box, Grow } from "@mui/material";

interface TabPanelProps {
  children?: ReactNode;
  index: number;
  value: number;
}

const TabPanel = ({ children, value, index, ...other }: TabPanelProps) => {
  return (
    <Box
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      <Grow in={value === index} timeout={1000}>
        <Box>{children}</Box>
      </Grow>
    </Box>
  );
};

export default TabPanel;
